<template>
  <div class="forms">
    <el-button type="primary" class="addButton" @click="addButton"
      >添加</el-button
    >
    <el-dialog :title="title" :visible.sync="dialog.isShowDialog" width="50%">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="img">
          <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :on-change="onChange"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog>
            <img width="100%" :src="imageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch
            :active-value="1"
            :inactive-value="2"
            inactive-color="#ff4949"
            v-model="ruleForm.status"
          >
          </el-switch>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addBanner" v-if="bid == ''"
          >确 定</el-button
        >
        <el-button type="primary" @click="editBanner" v-else>确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getBannerAdd,
  getBannerInfo,
  getBannerEdit,
} from "../../../request/api";
export default {
  props: ["dialog"],
  data() {
    return {
      bid: "",
      imageUrl: "",
      title: "",
      ruleForm: {
        title: "",
        img: "",
        status: 1,
      },
    };
  },
  methods: {
    resetFiled() {
      this.imageUrl = "";
      this.ruleForm = {
        title: "",
        img: "",
        status: 1,
      };
    },
    resetFrom() {
      this.dialog.isShowDialog = false;
      this.resetFiled();
      this.$emit("refreshList");
    },
    //点击取消
    cancel(){
      this.dialog.isShowDialog = false;
      this.resetFiled()
    },
    // 点击添加
    addButton() {
      this.title = "添加活动";
      this.dialog.isShowDialog = true;
    },
    // 上传图片触发change事件调用
    onChange(file) {
      let imgType = ["image/png", "image/jpg", "image/jpeg", "image/gif"];
      if (imgType.indexOf(file.raw.type) == -1)
        return this.$message.error("图片格式不满足png/jpg/jpeg/gif格式");
      if (file.raw.size > 2 * 1024 * 1024)
        return this.$message.error("图片大小不能超过2MB");
      this.imageUrl = URL.createObjectURL(file.raw);
      // 将文件信息赋给添加表单的数据
      this.ruleForm.img = file.raw;
    },
    // 添加活动
    addBanner() {
      let isFile = false;
      if (this.ruleForm.img != "") {
        isFile = true;
      }
      getBannerAdd(this.ruleForm, isFile).then(
        (res) => {
          if (res.data.code == 200) {
            this.$message.success("添加成功");
            this.resetFrom();
          }
        },
        (err) => err
      );
    },
    // 获取一个活动信息并展示在对话框中
    getOneBannerData(id) {
      this.title = "编辑活动";
      this.bid = id;
      getBannerInfo({ id }).then(
        (res) => {
          if (res.data.code == 200) {
            this.ruleForm = res.data.list;
            if (res.data.list.img != "") {
              this.imageUrl = this.baseURL + res.data.list.img;
              this.dialog.isShowDialog = true;
            }
          }
        },
        (err) => err
      );
    },
    // 编辑活动
    editBanner() {
      let obj = {
        id: this.bid,
        ...this.ruleForm,
      };
      let isFile = false;
      if (this.ruleForm.img != "") {
        isFile = true;
      }
      getBannerEdit(obj, isFile).then(
        (res) => {
          if (res.data.code == 200) {
            this.$message.success("编辑成功");
            this.resetFrom();
          }
        },
        (err) => err
      );
    },
  },
};
</script>

<style scoped>
.addButton {
  margin-bottom: 20px;
}
</style>

